/**
 * Created by hejg on 2018/5/16.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';
import {withNavigation} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Style from '../components/Style';

class Header extends Component {
    render() {
        return (
            <View style={styles.headerView}>
                <View style={styles.headerLeft}>
                    {this.props.headerLeft ? this.props.headerLeft : (
                            <TouchableOpacity
                                style={{flexDirection: 'row',flex:1,alignItems: 'center', justifyContent: 'center'}}
                                onPress={() => this.props.navigation.goBack(null)}>
                                <Ionicons name="ios-arrow-back" size={20} color={Style.color.white}/>
                                <Text
                                    style={{color:Style.color.white,fontSize:Style.fontSize.normal,marginLeft:2}}>返回</Text>
                            </TouchableOpacity>
                        )
                    }
                </View>
                <View style={styles.headerCenter}>
                    <Text
                        style={{color:Style.color.white,fontSize:Style.fontSize.normal}}>{this.props.headerTitle}</Text>
                </View>
                <View style={styles.headerRight}>
                    {this.props.headerRight ? this.props.headerRight : null}
                </View>
            </View>
        );
    }
}

export default withNavigation(Header);

Header.propTypes = {
    headerTitle: PropTypes.string.isRequired,
    headerLeft: PropTypes.node,
    headerRight: PropTypes.node
};

const styles = StyleSheet.create({
    headerView: {
        flexDirection: 'row', justifyContent: 'space-between', height: 44, backgroundColor: Style.color.blue
    },
    headerLeft: {
        alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 //backgroundColor: Style.color.red,
    },
    headerRight: {
        alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 //backgroundColor: Style.color.yellow,
    },
    headerCenter: {
        flex: 1, alignItems: 'center', justifyContent: 'center'
    }
});